<template>
  <div id="share-table-box">
    <div class="table-title-box">
      <p class="table-title" v-if="!!title">{{title}}</p>
      <div class="table-btn">
        <RPButton v-if="bindId && showBtn" type="info" optType="create" text="查看流程" @click="goProcessPage"></RPButton>
        <el-tooltip class="item" effect="dark" placement="left-start">
          <div slot="content" class="table-tip-box">
            <p class="tip-title">标识说明:</p>
            <div class="table-tip-content">
              <div class="green-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为建设完成</p>
                <p>目标/现状表行列：新增应用/组织</p>
                <p>计算表单元格：数值上升</p>
                <p>计算表行：新增应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="red-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为规划中/不涉及</p>
                <p>目标/现状表行列：减少应用/组织</p>
                <p>计算表单元格：数值下降</p>
                <p>计算表行：减少应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="orange-tip">
              </div>
              <div>
                <p>计算表单元格：文本类描述变化</p>
              </div>
            </div>
          </div>
          <Icon v-if="showTip" class="legend-icon" type="ios-help-circle-outline"/>
        </el-tooltip>
      </div>
    </div>
    <shareTable v-if="showTable" :columns="headerData" :height="tableHeight" :tableData="tableData" @cellClick="tableCellClick"></shareTable>
  </div>
</template>

<script>
import shareTable from '../shareTable'
import coverApi from '@/api/cover.js'

let TYPE_API = {
  status: 'getwfRptDgcalHrhxStatusDetail',
  target: 'getwfRptDgcalHrhxDetail',
  rate: 'getwfRptDgCalDetail',
}
export default {
  name: 'coverDetail',
  components: {
    shareTable
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: ''
    },
    trgNode: {
      type: String,
      default: ''
    },
    tableType: {
      type: String,
      default: ''
    },
    reportCycle: {
      type: String,
      default: ''
    },
    bindId: {
      type: String,
      default: ''
    },
    rptType: {
      type: String,
      default: ''
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    showTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      headerData:[],
      tableData: [],
      tableHeight: 0,
      showTable: false,
    }
  },
  methods: {
    tableCellClick() {

    },
    goProcessPage() {
      coverApi.getProcessUrl({ id: this.bindId, deviceType: 'PC' }).then(res => {
        window.open(res.data.data)
      })
    },
    columnFixed(data, baseData) {
      let isFixed = !!data && !!data.find(item => item.fixed)
      if (isFixed) {
        baseData.fixed = true
      } else {
        data && data.forEach(child => {
          this.columnFixed(child.children, baseData)
        });
      }
    },
    getTableInfo() {
      let params = { operateId: this.id,  trgNode: encodeURIComponent(this.trgNode), bindId: this.bindId }
      if (this.tableType == 'target') {
        params.reportCycle = this.reportCycle
      }
      if (this.tableType == 'rate') {
        params.rptType = this.rptType
      }
      coverApi[TYPE_API[this.tableType]](params).then(res => {
        this.headerData = res.data.data.tableColumn
        this.headerData.forEach(item => {
          this.columnFixed(item.children, item)
        })
        this.tableData = res.data.data.tableData
        this.showTable = true
      })
    },
  },
  mounted() {
    this.tableHeight = document.getElementById('share-table-box').clientHeight - 50
    window.onresize = () => {
      return (() => {
        this.tableHeight = document.getElementById('share-table-box').clientHeight - 50
      })()
    }
    this.getTableInfo()
  },
  beforeDestroy() {
    window.onresize = null
  },
}
</script>

<style lang="less" scoped>
#share-table-box {
  height: 100%;
}

.table-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .table-title {
    font-size: 16px;
    font-weight: 600;
  }
  .table-btn {
    display: flex;
    align-items: center;
    .ivu-btn {
      color: #fff;
      background-color: #ff6f4b;
      border-color: #ff6f4b;
    }
    .legend-icon {
      font-size: 24px;
      margin-left: 10px;
    }

  }

}

</style>
<style lang="less">
.table-tip-content {
  display: flex;
  font-size: 16px;
}
.tip-title {
  font-size: 18px;
  margin-bottom: 5px;
}
  .green-tip,.red-tip,.orange-tip {
    width: 40px;
    height: 18px;
    margin-right: 10px;
  }
  .green-tip {
    background: #C8E39B;
  }
  .red-tip {
    background: #F4B5B5;
  }
  .orange-tip {
    background: #F8D1AD;
  }
</style>
